<template>
    <div class="data-center-main" ref="dataCenter">
        <div class="container">
            <div class="top">
                <div>
                    <span class="title">标题：</span>
                    <el-input style="width: 200px;margin-right: 20px;" v-model="form.title" />
                    <span class="title">发布人：</span>
                    <el-select style="width: 200px;margin-right:20px" v-model="partName">
                        <el-option v-for="item in partList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button type="primary" icon="el-icon-search" v-model="form.title"
                        style="background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none"
                        @click="getList">搜索</el-button>
                    <el-button style="font-family:'HarmonyOS_Sans_SC_Regular';" @click="reset">重置</el-button>
                    <el-button style="font-family:'HarmonyOS_Sans_SC_Regular';">操作</el-button>
                    <!-- <ExportExcel :list="list" :tHeader="tHeader" :tValue="tValue" filename="消息导出" buttonName="数据导出">
                </ExportExcel> -->
                    <el-button style="font-family:'HarmonyOS_Sans_SC_Regular';" @click="handleDownload">导出</el-button>
                </div>
            </div>
            <div style="display: flex;height:82%;flex-direction: column;" v-loading="loading">
                <el-table :data="list">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="id" label="消息ID" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="标题" align="center">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="内容详情" prop="content" align="center">
                        <template slot-scope="scope">
                            <div class="one-line">
                                {{ scope.row.content }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优先级" prop="priority" align="center">

                        <template slot-scope="scope">
                            <span :class="[getPriorityColor(scope.row.priority), 'base-proity']">
                                {{ scope.row.priority | formatPriority }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" align="center">

                        <template slot-scope="scope">
                            <span :class="[
                        scope.row.status === 0 ? 'not-read' : 'alreay-read',
                        'base-status',
                    ]">
                                {{ scope.row.status === 0 ? '未读' : '已读' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="消息来源" prop="type" align="center">

                        <template slot-scope="scope">
                            {{ scope.row.type === 0 ? '其他' : '系统' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" prop="createTime" align="center">

                        <template slot-scope="scope">
                            {{ scope.row.createTime | formatDate }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="mark" label="标记" align="center">

                        <template slot-scope="scope">
                            <el-button size="mini" type="text" style="color: green;" v-if="scope.row.status === 0"
                                @click="openConfirm(scope.row, 'edit')">标为已读</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">

                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="modifyDrawer = true">在线巡逻</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="getList" />
                <!-- <div class="page">
                    <div style="margin-right: 20px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">共7条</div>
                    <el-button type="text" style="color:#333;margin-right: 10px;">
                        << /el-button>
                            <div class="pageborder">1</div>
                            <el-button type="text" style="color:#333;margin-right: 10px;">></el-button>
                            <div style="margin-right: 10px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">前往</div>
                            <el-input type="number" style="width: 60px;margin-right: 10px;" :min="0"
                                v-model="pageIndex" />
                            <div style="color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">页</div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
// import {
//     messageDeleteAll,
//     messageList,
//     messageListPage,
//     messageListTop,
//     messageSetRead,
//     messageUnreadCount,
//     messageSetReadAll
// } from '@/api/message/index'
//import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
export default {
    // components: {
    //     ExportExcel
    // },
    data() {

        const generateData = _ => {
            const data = [];
            const cities = ['浙江商识信息技术有限公司', '算法'];
            const pinyin = ['shangshi', 'algorithm'];
            cities.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    pinyin: pinyin[index]
                });
            });
            return data;
        };
        return {
            adjustOpen: false,
            data: generateData(),
            value: [],
            pageIndex: 1,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            form: '',
            tHeader: ['消息ID', '标题', '内容详情', '优先级', '状态', '消息来源', '发布时间'],
            tValue: ['id', 'title', 'content', 'priority', 'status', 'type', 'createTime'],
            oHeader: [],
            oValue: [],
            filename: '消息导出',
            filterMethod(query, item) {
                return item.pinyin.indexOf(query) > -1;
            },
            partTree: [{
                label: '浙江商识信息技术有限公司',
                children: [{
                    label: '算法',
                }]
            },],
            partUpdateList: ['浙江商识信息技术有限公司', '算法'],
            checkedMore: [],
            partList: [{
                label: '算法',
                value: '算法'
            }, {
                label: '研发',
                value: '研发'
            }, {
                label: '硬件',
                value: '硬件'
            }, {
                label: '运维',
                value: '运维'
            }, {
                label: '软件',
                value: '软件'
            },],
            partName: '',
            list: [
                //{
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // }, {
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // }, {
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // }, {
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // }, {
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // }, {
                //     number: '111',
                //     name: '星小眸',
                //     part: '技术',
                //     post: '开发',
                //     account: '800848',
                //     phone: '135163483456',
                //     mail: '234687685@gmail.com',
                // },
            ],
            partMember: '',
            partStatus: '',
            memberList: [{
                label: '星小眸',
                value: '星小眸'
            }, {
                label: '张',
                value: '张'
            }, {
                label: '王',
                value: '王'
            }, {
                label: '刘',
                value: '刘'
            }, {
                label: '林',
                value: '林'
            },],
            statusList: [{
                label: '工作',
                value: '工作'
            }, {
                label: '休息',
                value: '休息'
            }, {
                label: '出差',
                value: '出差'
            },],
            batchImportOpen: false,
            loading: false,
            activeName: 'first',
            departmentAddDrawer: false, //新建部门右侧抽屉
            modifyDrawer: false, //修改右侧抽屉
            form: {},  //修改的表单内数据
            partmentAddForm: {}, //新建部门表单
            rules: {
                name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
                partment: [{ required: true, message: "部门不能为空", trigger: "blur" }],
                phoneNumber: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
            },
            partmentAddrules: {
                partmentName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
                supDepartment: [{ required: true, message: "部门不能为空", trigger: "blur" }],
                leader: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
            },
            inform: [
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },
                {
                    informID: '11111',
                    title: '温控器离线',
                    info: '设备离线',
                    priority: '中',
                    status: '未读',
                    source: '系统',
                    creatTime: '2023.07.12 15:23',
                    mark: '标为已读',
                },

            ]
        }
    },
    filters: {
        formatPriority(value) {
            const map = {
                1: '低',
                2: '中',
                3: '高',
            }
            return map[value]
        },
    },
    mounted() {
        //this.getList()
    },

    beforeDestroy() {

    },
    methods: {
        openConfirm(row) {
            // this.$confirm
            this.$confirm('是否要将消息设为已读？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            })
                .then(() => {
                    this.handleOpt(row)
                })
                .catch(() => { })
        },
        handleOpt(row) {
            messageSetRead(row.id)
                .then((res) => {
                    console.log('## messageSetRead ==> ', res)
                    this.$message.success('操作成功')
                    this.queryByForm()
                })
                .catch((err) => {
                    console.log('## errr ==> ', err)
                })
        },
        queryByForm() {
            this.getList()
        },
        getList() {
            this.loading = true
            const params = {
                pageIndex: this.pageNum - 1,
                pageSize: this.pageSize,
                title: this.form.title,
            }
            messageListPage(params)
                .then((res) => {
                    console.log('## messageListPage res ==> ', res)
                    //
                    this.list = res.data.data
                    this.total = res.data.totalCount
                })
                .catch((err) => {
                    console.log('## err ==> ', err)
                }).finally(() => {
                    this.loading = false
                })
        },
        getPriorityColor(value) {
            const map = {
                1: 'priority-low',
                2: 'priority-mid',
                3: 'priority-high',
            }
            return map[value]
        },
        reset() {
            this.form = {};
            this.pageNum = 1;
            this.getList()
        },
        batchImport() {
            this.batchImportOpen = true
        },
        handleClick() {
        },
        submitForm() {
            this.modifyDrawer = false
        },
        cancel() {
            this.modifyDrawer = false
        },
        handleDownload() {
            this.downloadLoading = true
            import('./ExportExcel.js').then(excel => {
                // if(this.tValue[location]){
                //     this.tValue.add(location.location)
                //     this.tValue[location]=this.tValue[location].desc
                // }
                const data = this.formatJson(this.tValue, this.list)
                console.log('tvalue', this.tValue, this.list);

                excel.export_json_to_excel({
                    header: this.tHeader,
                    data,
                    filename: this.filename,
                    autoWidth: this.autoWidth,
                    bookType: this.bookType
                })
                this.downloadLoading = false
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                if (j == 'desc') {
                    return v.location?.desc || ''
                } else if (j == 'location') {
                    return v.location?.location || ''
                } else if (j == 'status') {
                    return v.status == 'ONLINE' ? '在线' : '离线'
                } else if (j == 'pianli') {
                    return v.pianli == 'TRUE' ? '偏离' : '正常'
                } else if (j == 'userName') {
                    return v.user?.nickname || ''
                } else if (j == 'userId') {
                    return v.user?.id || ''
                } else if (j == 'classify') {
                    return v.classify === 0 ? '本品' : (v.classify === 1 ? '竞品' : '他品')
                } else if (j == 'biPuPin') {
                    return v.biPuPin ? '是' : '否'
                } else if (j == 'nickname') {
                    return v.user?.nickname
                } else if (j == 'level') {
                    return v.user?.level
                } else if (j == 'purityEmptyAvg') {
                    return v.purityEmptyAvg ? (v.purityEmptyAvg.toFixed(2) + '%') : '无数据'
                } else if (j == 'purityAvg') {
                    return v.purityAvg ? (v.purityAvg.toFixed(2) + '%') : '无数据'
                } else if (j == 'power') {
                    return v.power === 0 ? '电池供电' : '市电供电'
                } else if (j == 'missing') {
                    return v.missing === 0 ? '正常' : '失联'
                } else if (j == 'tempAbnormal') {
                    return v.tempAbnormal === 0 ? '正常' : '异常'
                } else if (j == 'sieveAbnormal') {
                    return v.tempAbnormal === 0 ? '正常' : '异常'
                } else if (j == 'locationAbnormal') {
                    return v.tempAbnormal === 0 ? '正常' : '异常'
                } else if (j == 'assetCode') {
                    return v.assetCode || '暂未绑定'
                } else if (j == 'alarmStatu') {
                    return v.alarmList.length > 0 ? '有' : '无'
                }
                else {
                    return v[j]
                }

            }))
        },
        handleCheckChange(node) {
            console.log('node', node.id);
            console.log('this.checkedMore', this.checkedMore);

            if (this.checkedMore.includes(node.id)) {
                this.partUpdateList.map((e, index) => {
                    if (e == node.label) {
                        console.log('index', index);
                        this.partUpdateList.splice(index, 1)
                    }
                })
                this.checkedMore.splice(this.checkedMore.indexOf(node.id), 1)
            } else {
                this.partUpdateList.push(node.label)
                this.checkedMore.push(node.id)
            }


            // if(data.checked){ ///???如何过去选中状态
            //     console.log('data', data);
            // this.partUpdateList.push(data.label)
            // }else{
            //     this.partUpdateList.splice(1, 1)
            // }

        },
        del(item) {
            console.log('item', item);
            this.partUpdateList.map((e, index) => {
                if (e == item) {
                    console.log('index', index);

                    this.partUpdateList.splice(index, 1)
                }
            })
            //this.partUpdateList.splice(id,1)
        }

    }
}
</script>

<style lang="scss" scoped>
.data-center-main {
    background-color: #F3F3F3;
    width: 100%;
    height: calc(100vh - 85px);
    display: flex;
    padding: 1%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 8px;
    padding: 15px
}

.top {
    width: 100%;
    height: 15%;
    background-color: #F9FAFF;
    border-radius: 8px;
    margin-bottom: 20px;
    //border: solid 1px red;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 15px;
}

.left {
    width: 20%;
    height: 90%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-right: 1px solid #D7D7D7;
    // border-top: 1px solid #D7D7D7;
}

::v-deep .el-tree>.el-tree-node>.el-tree-node__content {
    background-color: #5B6BF4 8%;
}

//树形结构一级背景
.right {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.not-read {
    color: red;
    background: #fdf1f0;
    border: 1px solid red;
}

.alreay-read {
    color: green;
    background: rgb(0, 255, 0, 0.3);
    border: 1px solid green;
}

.priority-low {
    background: grey;
}

.priority-mid {
    background: rgba(248, 248, 179, 0.4);
    // color: yellow;
    color: rgba(130, 130, 4, 0.4);
}

.base-status {
    display: inline-block;
    // padding-left: 2px;
    // padding-right: 2px;
    padding: 2px;
    border-radius: 2px;
    font-size: 12px;
    height: 16px;
    line-height: 10px;
}

.priority-high {
    background: rgb(255, 0, 0, 0.4);
    color: red;
}

.base-proity {
    display: inline-block;
    // padding-left: 2px;
    // padding-right: 2px;
    padding: 2px;
    border-radius: 2px;
    font-size: 12px;
    height: 16px;
    line-height: 10px;
}

.right-top {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D7D7D7;
    padding-left: 15px;
}

::v-deep .el-dialog__header {
    padding: 0px;
}

::v-deep .el-dialog__body {
    padding: 1 20px;
}

::v-deep .el-upload {
    display: flex;
    text-align: center;
    cursor: pointer;
    outline: none;
    justify-content: center;
    align-items: center;
}

::v-deep .el-upload--picture-card {
    background-color: white // border: 1px dashed #c0ccda;
}

::v-deep .el-drawer__header {
    background-color: #7E8EFF;
    color: white;
    display: flex;
    margin-bottom: 32px;
    padding: 20px;
    padding-bottom: 20px;
    align-items: center;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

.download {
    width: 500px;
    height: 60px;
    background-color: rgba(91, 107, 244, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px
}

.group {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

.group>div {
    width: 25%;
    height: 36px;
    background: rgba(91, 107, 244, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.title {
    font-family: 'HarmonyOS_Sans_SC_Regular';
    font-size: 15px;
}

.page {
    display: flex;
    height: 80px;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.02);
    bottom: 10px;
    position: absolute;
}

.pageborder {
    margin-right: 10px;
    border: 1px solid #dcdfe6;
    width: 40px;
    height: 36px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

::v-deep .el-input__inner::-webkit-outer-spin-button,

::v-deep .el-input__inner::-webkit-inner-spin-button {

    -webkit-appearance: none;
}

::v-deep .el-input__inner[type='number'] {
    -moz-appearance: textfield;
}
</style>